<template>
    <div>
        <h1>优惠券列表</h1>
        <input type="button" value="价格升序" @click="OrderByPrice(true)">
        <input type="button" value="价格降序" @click="OrderByPrice(false)">
        <input type="button" value="把当前选中的券发给指定的用户" @click="Addll">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" >
                    </td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>编号</td>
                    <td>价格</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td>
                        <input type="checkbox" :value="item.id" v-model="_values">
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.price }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

const _values=ref([])

//批量发放优惠券
const Addll=()=>{
    let idlist=_values.value.toString();
    //选取中的优惠券编号
    router.push({ path: '/Show',query:{idstring:idlist}})
}

//价格排序
const OrderByPrice=(val:any)=>{
    p.value.sort=val;
    Getdata();
}

onMounted(()=>{
    Getdata();
})
const p=ref({sort:true})
const data=ref([{
    "id": 1,
    "name": "产品优惠券",
    "number": "20250213988",
    "price": 200
}])
const Getdata=()=>{
    axios.get("https://localhost:7275/api/Coupons/GetCoupons",{params:p.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>